<template>
  <view class="app-container">
    <wd-card custom-style="margin-top: 20rpx" class="theme-card">
      <wd-cell-group border>
        <wd-cell
          title="账户密码"
          label="定期修改密码有助于保护账户安全"
          value="修改"
          is-link
          @click="handleOpenDialog(DialogType.PASSWORD)"
        >
          <template #title>
            <text class="theme-text-primary">账户密码</text>
          </template>
          <template #label>
            <text class="theme-text-secondary">定期修改密码有助于保护账户安全</text>
          </template>
          <template #value>
            <text class="theme-text-secondary">修改</text>
          </template>
        </wd-cell>
      </wd-cell-group>
    </wd-card>

    <!--用户信息编辑弹出框-->
    <wd-popup
      v-model="dialog.visible"
      position="bottom"
      custom-style="border-top-left-radius: 16rpx; border-top-right-radius: 16rpx;"
    >
      <view class="popup-header">
        <wd-cell :title="getDialogTitle" center>
          <template #right-icon>
            <wd-icon name="close" size="20" @click="dialog.visible = false" />
          </template>
        </wd-cell>
      </view>

      <wd-divider />

      <wd-form
        v-if="dialog.type === DialogType.PASSWORD"
        ref="passwordChangeFormRef"
        :model="passwordChangeForm"
        custom-class="edit-form"
      >
        <wd-cell-group border>
          <wd-input
            v-model="passwordChangeForm.old_password"
            label="原密码"
            label-width="160rpx"
            show-password
            clearable
            placeholder="请输入原密码"
            prop="old_password"
            :rules="rules.oldPassword"
          />
          <wd-input
            v-model="passwordChangeForm.new_password"
            label="新密码"
            label-width="160rpx"
            show-password
            clearable
            placeholder="请输入新密码"
            prop="new_password"
            :rules="rules.newPassword"
          />
          <wd-input
            v-model="passwordChangeForm.confirm_password"
            label="确认密码"
            label-width="160rpx"
            show-password
            clearable
            placeholder="请确认新密码"
            prop="confirm_password"
            :rules="rules.confirmPassword"
          />
        </wd-cell-group>
        <view class="p-6">
          <wd-button type="primary" size="large" block @click="handleSubmit">提交</wd-button>
        </view>
      </wd-form>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import UserAPI, { PasswordChangeForm, UserInfo } from "@/api/user";
import { useNavigationBar } from "@/composables/useNavigationBar";

const { initNavigationBar } = useNavigationBar();

// 初始化导航栏样式
initNavigationBar();

const validatorConfirmPassword = (value: string) => {
  if (!value) {
    return Promise.reject("请确认密码");
  } else {
    if (value !== passwordChangeForm.new_password) {
      return Promise.reject("两次输入的密码不一致");
    } else {
      return Promise.resolve();
    }
  }
};

// 本页面中所有的校验规则
const rules = reactive({
  oldPassword: [{ required: true, message: "请填写原密码" }],
  newPassword: [{ required: true, message: "请填写新密码" }],
  confirmPassword: [
    {
      required: true,
      message: "请确认密码",
      validator: validatorConfirmPassword,
    },
  ],
  mobile: [
    {
      required: true,
      pattern: /^1[3-9]\d{9}$/,
      message: "请填写正确的手机号码",
    },
  ],
  code: [{ required: true, message: "请填写验证码" }],
  email: [
    {
      required: true,
      pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
      message: "请填写正确的邮箱地址",
    },
  ],
});

enum DialogType {
  PASSWORD = "password",
  MOBILE = "mobile",
  EMAIL = "email",
}

const getDialogTitle = computed(() => {
  switch (dialog.type) {
    case DialogType.PASSWORD:
      return "修改密码";
    case DialogType.MOBILE:
      return "绑定手机";
    case DialogType.EMAIL:
      return "绑定邮箱";
    default:
      return "账号设置";
  }
});

const dialog = reactive({
  visible: false,
  type: "" as DialogType, // 修改账号资料,修改密码、绑定手机、绑定邮箱
});

const userProfile = ref<UserInfo>(); //用户信息
const passwordChangeForm = reactive<PasswordChangeForm>({
  old_password: "",
  new_password: "",
  confirm_password: "",
});
const passwordChangeFormRef = ref();

/** 加载用户信息 */
const loadUserProfile = async () => {
  userProfile.value = await UserAPI.getCurrentUserInfo();
};

/**
 * 打开弹窗
 * @param type 弹窗类型 ACCOUNT: 账号资料 PASSWORD: 修改密码 MOBILE: 绑定手机 EMAIL: 绑定邮箱
 */
const handleOpenDialog = (type: DialogType) => {
  dialog.type = type;
  dialog.visible = true;
  switch (type) {
    case DialogType.PASSWORD:
      passwordChangeForm.old_password = "";
      DialogType.PASSWORD;
      passwordChangeForm.new_password = "";
      passwordChangeForm.confirm_password = "";
      break;
  }
};

// 提交表单
function handleSubmit() {
  if (dialog.type === DialogType.PASSWORD) {
    passwordChangeFormRef.value.validate().then(({ valid }: { valid: boolean }) => {
      if (valid) {
        UserAPI.changeCurrentUserPassword(passwordChangeForm)
          .then(() => {
            uni.showToast({ title: "密码修改成功", icon: "success" });
            dialog.visible = false;
          })
          .catch((error: any) => {
            uni.showToast({
              title: error?.message || "密码修改失败",
              icon: "error",
            });
          });
      }
    });
  }
}

onMounted(() => {
  loadUserProfile();
});
</script>

<route lang="json">
{
  "name": "account",
  "style": {
    "navigationBarTitleText": "账号和安全"
  },
  "layout": "tabbar"
}
</route>
